<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Ravikumar Chauhan">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pure CSS Progress Bars</title>

  <!-- Meta and Opengraph tags -->
  <meta name="description" content="Pure CSS Progress Bars">
  <meta name="keywords" content="css, html, progress bar">

  <!-- Stylesheet -->
  <link rel="stylesheet" href="css/progressbar.min.css">
</head>
<body>
  <!-- header -->
  <header>
    <h2>Pure CSS Progress Bars</h2>
    <div class="project">
      <a class="btn1 gitBtn" href="https://github.com/rkchauhan/pure-css-progress-bars/" target="_blank"><i class="fa fa-github"></i> GitHub</a>
      <a class="btn1 penBtn" href="http://codepen.io/rkchauhan/pen/LGgaeK" target="_blank"><i class="fa fa-codepen"></i> CodePen</a>
    </div>
  </header><!-- @end header -->
  
  <!-- main -->
  <main>
    <div class="main-content">
      <div id="example-1" class="examples">
        <h3>Example #1 - Progress1</h3>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar" data-percent="75" style="width: 75%;">
              <span class="cssProgress-label">75%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar cssProgress-info" data-percent="65" style="width: 65%;">
              <span class="cssProgress-label">65%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar cssProgress-danger" data-percent="55" style="width: 55%;">
              <span class="cssProgress-label">55%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar cssProgress-success" data-percent="45" style="width: 45%;">
              <span class="cssProgress-label">45%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar cssProgress-warning" data-percent="35" style="width: 35%;">
              <span class="cssProgress-label">35%</span>
            </div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-1 -->

      <div id="example-2" class="examples">
        <h3>Example #2 - Progress2</h3>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar" data-percent="75" style="width: 75%;">
              <span class="cssProgress-label">75%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-info" data-percent="65" style="width: 65%;">
              <span class="cssProgress-label">65%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-danger" data-percent="55" style="width: 55%;">
              <span class="cssProgress-label">55%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-success" data-percent="45" style="width: 45%;">
              <span class="cssProgress-label">45%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-warning" data-percent="35" style="width: 35%;">
              <span class="cssProgress-label">35%</span>
            </div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-2 -->

      <div id="example-3" class="examples">
        <h3>Example #3 - Progress3</h3>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar" data-percent="75" style="width: 75%;">
              <span class="cssProgress-label">75%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-info" data-percent="65" style="width: 65%;">
              <span class="cssProgress-label">65%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-danger" data-percent="55" style="width: 55%;">
              <span class="cssProgress-label">55%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-success" data-percent="45" style="width: 45%;">
              <span class="cssProgress-label">45%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-warning" data-percent="35" style="width: 35%;">
              <span class="cssProgress-label">35%</span>
            </div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-3 -->

      <div id="example-4" class="examples">
        <h3>Example #4 - Stripes</h3>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar cssProgress-info cssProgress-stripes" data-percent="75" style="width: 75%;">
              <span class="cssProgress-label">75%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-success cssProgress-stripes" data-percent="65" style="width: 65%;">
              <span class="cssProgress-label">65%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-warning cssProgress-stripes" data-percent="55" style="width: 55%;">
              <span class="cssProgress-label">55%</span>
            </div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-4 -->

      <div id="example-5" class="examples">
        <h3>Example #5 - Animation</h3>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar cssProgress-active" data-percent="75" style="width: 75%;">
              <span class="cssProgress-label">75%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-success cssProgress-active" data-percent="65" style="width: 65%;">
              <span class="cssProgress-label">65%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-warning cssProgress-active" data-percent="55" style="width: 55%;">
              <span class="cssProgress-label">55%</span>
            </div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-5 -->

      <div id="example-6" class="examples">
        <h3>Example #6 - Reverse animation</h3>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar cssProgress-active-right" data-percent="75" style="width: 75%;">
              <span class="cssProgress-label">75%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-success cssProgress-active-right" data-percent="65" style="width: 65%;">
              <span class="cssProgress-label">65%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-warning cssProgress-active-right" data-percent="55" style="width: 55%;">
              <span class="cssProgress-label">55%</span>
            </div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-6 -->

      <div id="example-7" class="examples">
        <h3>Example #7 - Float right</h3>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar cssProgress-right" data-percent="75" style="width: 75%;">
              <span class="cssProgress-label">75%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-success cssProgress-stripes cssProgress-right" data-percent="65" style="width: 65%;">
              <span class="cssProgress-label">65%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-warning cssProgress-active-right cssProgress-right" data-percent="55" style="width: 55%;">
              <span class="cssProgress-label">55%</span>
            </div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-7 -->

      <div id="example-8" class="examples">
        <h3>Example #8 - Label middle</h3>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar" data-percent="75" style="width: 75%;">
              <span class="cssProgress-label">75%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-success cssProgress-stripes" data-percent="65" style="width: 65%;">
              <span class="cssProgress-label">65%</span>
            </div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-warning cssProgress-active" data-percent="55" style="width: 55%;">
              <span class="cssProgress-label">55%</span>
            </div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-8 -->

      <div id="example-9" class="examples">
        <h3>Example #9 - Label top</h3>
        <div class="cssProgress">
          <div class="cssProgress-label2">75%</div>
          <div class="progress1">
            <div class="cssProgress-bar" data-percent="75" style="width: 75%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="cssProgress-label2 cssProgress-label2-center">65%</div>
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-success cssProgress-stripes" data-percent="65" style="width: 65%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="cssProgress-label2 cssProgress-label2-right">55%</div>
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-warning cssProgress-active" data-percent="55" style="width: 55%;"></div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-9 -->

      <div id="example-10" class="examples">
        <h3>Example #10 - Label bottom</h3>
        <div class="cssProgress">
          <div class="progress1">
            <div class="cssProgress-bar" data-percent="75" style="width: 75%;"></div>
          </div>
          <div class="cssProgress-label2">75%</div>
        </div>
        <div class="cssProgress">
          <div class="progress2">
            <div class="cssProgress-bar cssProgress-success cssProgress-stripes" data-percent="65" style="width: 65%;"></div>
          </div>
          <div class="cssProgress-label2 cssProgress-label2-center">65%</div>
        </div>
        <div class="cssProgress">
          <div class="progress3">
            <div class="cssProgress-bar cssProgress-warning cssProgress-active" data-percent="55" style="width: 55%;"></div>
          </div>
          <div class="cssProgress-label2 cssProgress-label2-right">55%</div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-10 -->

      <div id="example-11" class="examples">
        <h3>Example #11 - Progress4</h3>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar" data-percent="75" style="width: 75%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-info" data-percent="65" style="width: 65%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-warning" data-percent="55" style="width: 55%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-success" data-percent="45" style="width: 45%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-danger" data-percent="35" style="width: 35%;"></div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-11 -->

      <div id="example-12" class="examples">
        <h3>Example #12 - Progress4 with Glow & Bg color</h3>
        <div class="cssProgress">
          <div class="progress4 cssProgress-bg">
            <div class="cssProgress-bar cssProgress-glow" data-percent="75" style="width: 75%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4 cssProgress-bg-info">
            <div class="cssProgress-bar cssProgress-info cssProgress-glow" data-percent="65" style="width: 65%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4 cssProgress-bg-warning">
            <div class="cssProgress-bar cssProgress-warning cssProgress-glow" data-percent="55" style="width: 55%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4 cssProgress-bg-success">
            <div class="cssProgress-bar cssProgress-success cssProgress-glow" data-percent="45" style="width: 45%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4 cssProgress-bg-danger">
            <div class="cssProgress-bar cssProgress-danger cssProgress-glow" data-percent="35" style="width: 35%;"></div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-12 -->

      <div id="example-13" class="examples">
        <h3>Example #13 - Progress4 with Glow animation & size - [ lg, 2x, 3x, 4x, 5x ]</h3>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-glow-active cssProgress-lg" data-percent="75" style="width: 75%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-info cssProgress-glow-active cssProgress-2x" data-percent="65" style="width: 65%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-warning cssProgress-glow-active cssProgress-3x" data-percent="55" style="width: 55%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-success cssProgress-glow-active cssProgress-4x" data-percent="45" style="width: 45%;"></div>
          </div>
        </div>
        <div class="cssProgress">
          <div class="progress4">
            <div class="cssProgress-bar cssProgress-danger cssProgress-glow-active cssProgress-5x" data-percent="35" style="width: 35%;"></div>
          </div>
        </div>
        <span class="btn btn-primary progressStart">Start</span> &nbsp;&nbsp; <span class="btn btn-primary progressReset">Reset</span>
      </div><!-- @end #example-13 -->

    </div>
  </main><!-- @end main -->

</body>
</html>